#app {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px;
  background: #bbada0;
  border-radius: 5px;
  padding: 10px;
}

.cell {
  width: 80px;
  height: 80px;
  background-color: #f3f3f3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  border-radius: 3px;
}

.score {
  font-size: 24px;
  margin-bottom: 20px;
}

/* cell colors */
.cell-2 {
  background: #eee4da;
  color: #776e65;
}
.cell-4 {
  background: #ede0c8;
  color: #776e65;
}
.cell-8 {
  background: #f2b179;
  color: #f9f6f2;
}
.cell-16 {
  background: #f59563;
  color: #f9f6f2;
}
.cell-32 {
  background: #f67c5f;
  color: #f9f6f2;
}
.cell-64 {
  background: #f65e3b;
  color: #f9f6f2;
}
.cell-128 {
  background: #edcf72;
  color: #f9f6f2;
}
.cell-256 {
  background: #edcc61;
  color: #f9f6f2;
}
.cell-512 {
  background: #edc850;
  color: #f9f6f2;
}
.cell-1024 {
  background: #edc53f;
  color: #f9f6f2;
}
.cell-2048 {
  background: #edc22e;
  color: #f9f6f2;
}
.cell-4096 {
  background: #7ae0c8;
  color: #f9f6f2;
}
.cell-8192 {
  background: #6acbde;
  color: #f9f6f2;
}
.cell-16384 {
  background: #5ab6f4;
  color: #f9f6f2;
}
.cell-32768 {
  background: #4aa1ff;
  color: #f9f6f2;
}
.cell-65536 {
  background: #8d7cff;
  color: #f9f6f2;
}
.cell-131072 {
  background: #c25eff;
  color: #f9f6f2;
}
.cell-262144 {
  background: #ff40d9;
  color: #f9f6f2;
}
.cell-524288 {
  background: #ff6b8a;
  color: #f9f6f2;
}
.cell-1048576 {
  background: #a1d36e;
  color: #f9f6f2;
}
.cell-2097152 {
  background: #6ed3b0;
  color: #f9f6f2;
}
.cell-4194304 {
  background: #5eb5d9;
  color: #f9f6f2;
}
.cell-8388608 {
  background: #b380ff;
  color: #f9f6f2;
}
.cell-16777216 {
  background: #ff66cc;
  color: #f9f6f2;
}
.cell-33554432 {
  background: #66ffd9;
  color: #f9f6f2;
}
.cell-67108864 {
  background: #ffad66;
  color: #f9f6f2;
}
.cell-134217728 {
  background: #9f94ff;
  color: #f9f6f2;
}
.cell-268435456 {
  background: #7affb3;
  color: #f9f6f2;
}
.cell-536870912 {
  background: #ff99eb;
  color: #f9f6f2;
}
.cell-1073741824 {
  background: #85e6ff;
  color: #f9f6f2;
}
.cell-2147483648 {
  background: #d966ff;
  color: #f9f6f2;
}
.cell-4294967296 {
  background: #66ff99;
  color: #f9f6f2;
}
